<template>
  <div class="city-select">
    <select v-model="selectedProvince" class="select">
      <option :value="item" v-for="(item, index) in provinces">{{item.name}}</option>
    </select>
    <select v-model="selectedCity" class="select">
      <option :value="item" v-for="(item, index) in cities">{{item.name}}</option>
    </select>
    <select v-model="selectedBlock" class="select" @change="confirmadd()">
      <option :value="item" v-for="(item, index) in blocks">{{item.name}}</option>
    </select>
  </div>
</template>
<script>
  import provinces from '../common/js/province'
  export default {
    data () {
      return {
        selectedProvince: {},
        selectedCity: {},
        selectedBlock: {},
        cities: 0,
        provinces: [],
        blocks: 0
      }
    },
    mounted () {
      let self = this
      // console.log(JSON.stringify(this.editcity))
      this.provinces = provinces.filter(self.allProvince)
      this.selectedProvince = this.provinces[0]
      this.cities = provinces.filter(self.cityInProvince)
      this.selectedCity = this.cities[0]
      this.blocks = provinces.filter(self.blockInCity)
      this.selectedBlock = this.blocks[0]
      this.$emit('selcity', {
        province: self.selectedProvince,
        city: self.selectedCity,
        block: self.selectedBlock
      })
      if (this.editcity.length !== 0) {
        for (let i = 0; i < provinces.length; i++) {
          if (provinces[i].code === this.editcity.provinceCode) {
            this.selectedProvince = provinces[i]
            console.log(this.selectedProvince.name)
          }
          if (provinces[i].code === this.editcity.cityCode) {
            this.selectedCity = provinces[i]
            console.log(this.selectedCity.name)
          }
          if (provinces[i].code === this.editcity.areaCode) {
            this.selectedBlock = provinces[i]
            console.log(this.selectedBlock.name)
          }
        }
      }
    },
    watch: {
      'selectedProvince' (val, oldval) {
        let self = this
        this.cities = provinces.filter(self.cityInProvince)
        this.selectedCity = this.cities[0]
      },
      'selectedCity' (val, oldval) {
        let self = this
        this.blocks = provinces.filter(self.blockInCity)
        this.selectedBlock = this.blocks[0]
      },
      'editcity' (val, oldval) {
        if (val.length !== 0) {
          for (let i = 0; i < provinces.length; i++) {
            if (provinces[i].code === this.editcity.provinceCode) {
              this.selectedProvince = provinces[i]
              console.log(this.selectedProvince.name)
            }
            if (provinces[i].code === this.editcity.cityCode) {
              this.selectedCity = provinces[i]
              console.log(this.selectedCity.name)
            }
            if (provinces[i].code === this.editcity.areaCode) {
              this.selectedBlock = provinces[i]
              console.log(this.selectedBlock.name)
            }
          }
        }
      }
    },
    props: ['editcity'],
    methods: {
      allProvince (currentValue) {
        return currentValue.level === 1
      },
      cityInProvince (currentValue) {
        return currentValue.sheng === this.selectedProvince.sheng && currentValue.level === 2
      },
      blockInCity (currentValue) {
        return currentValue.sheng === this.selectedProvince.sheng && currentValue.di === this.selectedCity.di && currentValue.level === 3
      },
      confirmadd () {
        let self = this
        this.$emit('selcity', {
          province: self.selectedProvince,
          city: self.selectedCity,
          block: self.selectedBlock
        })
      }
    }

  }
</script>
<style lang="less" scoped>
  .select{
    border-radius: 5px;
    padding:5px;
    cursor: pointer;
  }
</style>
